<template>
	<view class="out-main" >	 
		<swiper class="topBg" 
		@tap="previewImage(shopInfo.images)" 
		:style="{height: bgHeight+'rpx'}" >
			<swiper-item v-for="(item,index) in shopInfo.images" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	  <div class="main-content" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
		  <image class="logo" @tap="previewImage(shopInfo.logo)" :src="shopInfo.logo"></image>
		  <div class="title-bar">
			  <div class="title">{{shopInfo.title}}</div>
			 
		  </div>
		  <div class="info-bar">
			  <div class="row1">
				  <div class="col1">
					  <div class="tit">评分</div>
					  <div class="num">{{ shopInfo.mark }}</div>
				  </div>
				  <div class="col2">
					  <div class="tit">月售</div>
					  <div class="num">{{shopInfo.ordernum}}</div>
				  </div>
				  <div class="col3">
					  <div class="tit">商家营业</div>
					  <div class="stat">{{shopInfo.isbusiness == 0?'未营业':'营业中'}}</div>
				  </div>
			  </div>
			  <div class="row2">
				  <div class="label1">
					  <div class="quan">券</div>
					  <div class="miaoshu">{{shopInfo.quan_money}}</div>
				  </div>
				  <div class="label2">
					  <div class="miaoshu">店内支持使用支付金</div>
				  </div>
			  </div>
			  <div class="row3">
				  <div class="dizhi">
					  {{shopInfo.address}}
				  </div>
				  <div class="icon-group">
					  <div class="daohang" @tap="Goto">
						  <uni-icons type="location-filled" size="20" color="#999"></uni-icons>
						  <span>导航</span>
					  </div>
					  <div class="dianhua" @tap="playphone">
						  <uni-icons type="phone-filled" size="20" color="#999"></uni-icons>
						  <span>电话</span>
					  </div>
				  </div>
  
			  </div>
		  </div>
		  
	  </div>
	  <div class="navigator">
		  <div class="nav-item" :class="{active: activeIndex === 0}" @click="handleNavItemClick(0)">
			  <span>点菜</span>
		  </div>
		  <div class="nav-item" :class="{active: activeIndex === 1}" @click="handleNavItemClick(1)">
			  <span>商家</span>
		  </div>
	  </div>
	  <scroll-view scroll-y style="flex: 1;" v-if="activeIndex === 1">
		  <div class="merchant-info">
			  <div class="shop-env">
				  <!-- 店内环境 -->
				  <div class="title">
					  <uni-icons class="image" type="image" size="22" color="#333333"></uni-icons>
					  <span>店内环境</span>
					  <div class="more">
						  更多<uni-icons type="right" size="14" color="#999999" @tap="previewImage(shopInfo.images)"></uni-icons>
					  </div>
				  </div>
				  <div class="pic-group" style="justify-content: flex-start">
					  <div class="pic-item" v-for="(item,index) in shopInfo.images" v-if="index<3" :key="index">
						  <image 
							  class="pic"
							  width="100"
							  mode="aspectFill"
							  :src="item"
							  @tap="previewImage(item)"
						  ></image>
					  </div>
				  </div>
			  </div>
		  </div>
		  <div class="merchant-info">
			  <div class="shop-env">
				  <!-- 店内环境 -->
				  <div class="title">
					  <uni-icons class="image" type="person" size="22" color="#333333"></uni-icons>
					  <span>商家档案</span>
				  </div>
				  <div class="pic-group" @tap="previewImage(shopInfo.yyzz_images)">
					  <div class="yyzz">营业执照</div>
					  <div class="more">
						  <uni-icons type="right" size="22" color="#333333"></uni-icons>
					  </div>
				  </div>
			  </div>
		  </div>
		  <div class="merchant-info">
			  <div class="shop-env">
				  <div class="title">
					  <uni-icons class="image" type="person" size="22" color="#333333"></uni-icons>
					  <span>商家介绍</span>
				  </div>
				  <div class="pic-group">
					  <div class="yyzz">{{ shopInfo.content }}</div>
				  </div>
			  </div>
		  </div>
	  </scroll-view>
	  <view class="left-cate" v-if="activeIndex===0">
		<view class="cate-row1">
			<view class="cate-title">
				左侧类目管理
			</view>
			<view class="sub-tip">
				点击删除
			</view>
			<uni-icons class="right-icon" type="right" size="18" color="#999999"></uni-icons>
		</view>
		<!-- 
			之所以元素是纵向排列的，可能是因为 <span> 默认是行内元素，但在小程序或某些环境下，scroll-view 内部的元素可能会被渲染为块级，或者样式未生效。
			建议检查 .cate-row2 的样式，确保 display: flex; 和 flex-direction: row; 已设置。
			另外，建议将 <span> 替换为 <view>，并确保样式作用于 <view>。
			下面是推荐写法，保证横向排列：
		-->
		<scroll-view class="cate-row2" scroll-x v-if="cates.length > 0">
			<view class="row2-box">
				<view 
				class="cate-time" 
				v-for="(item,index) in cates" 
				:key="index" 
				@click="deleteCate(item.id)"
			>
				{{item.name}}
			</view>
			</view>
		</scroll-view>
	  </view>
	  <div class="order-dish" v-if="activeIndex===0">
		  <scroll-view class="aside" scroll-y>
			  <view class="add-cate" @click="addCate">添加</view>
			  <div class="sidebar" v-for="(item,index) in cates" :key="index" @click="selectCate(item.id)" :class="{active: activeCate === item.id}">
				{{item.name}}
			  </div>
		  </scroll-view>
		  <scroll-view class="receip" scroll-y>
			  <view class="add-goods"  @click="addGoods">
				 <uni-icons type="plus" size="28" color="#F16325"></uni-icons>
				<span class="add-goods-text">添加商品</span>
			  </view>
			  <div class="goods-bar" v-for="(item,index) in submitGoods" :key="index" @click="editGoods(item.id)">
				  <div class="goods-logo">
					  <image mode="aspectFill"
					  :src="item.cover"></image>
				  </div>
				  <div class="goods-info">
					  <div class="goods-name">
						  {{item.goods_name}}
					  </div>
					  <view class="goods-info-row2">
						<view class="stock">库存：{{item.stock}}</view>
						<view v-if="item.goods_attr" class="sales">规格: {{item.goods_attr}}</view>
					  </view>
					  <div class="select">
						  <div class="goods-price">
							  <div class="yuan">￥</div>
							  <div class="price">{{item.goods_price}}</div>
						  </div>
						  <div class="operate">							
							<text class="text">编辑</text>
							<text class="text" @click.stop="deleteGoods(item.id)">删除</text>
						  </div>
					  </div>
					  
				  </div>
			  </div>
			  
		  </scroll-view>
	  </div>
	  <div class="footer" v-if="activeIndex===0">
		  
		  <button class="submit" @click="saveGoods">
			  保存修改
		  </button>
	  </div>
	  
	  <view class="drawer-content" v-if="drawerParam.show" @close="drawerParam.show = false">
		  <view class="drawer-header">
			  <view class="drawer-header-title">{{drawerParam.title}}</view>
			  <view class="drawer-header-close" @click="drawerParam.show = false">
				  <uni-icons type="close" size="24" color="#999999"></uni-icons>
			  </view>
		  </view>
		  <scroll-view class="drawer-body">
			  <view  class="drawer-body-item" :style="{display: item.hidden ? 'none' : 'block'}"  v-for="(item,index) in drawerParam.rows" :key="index">
				  <view class="drawer-body-item-title">{{item.label}}</view>
				  <view class="drawer-body-item-input" v-if="item.type === 'input'">
					  <input type="text" :placeholder="item.placeholder" v-model="item.value" />
				  </view>
				  <view class="drawer-body-item-select" v-if="item.type === 'select'">
					<view @click="()=>{drawerParam.rows.find(r => r.field === item.field).select = true}">
						{{ 
							cates.find(cate => cate.id === item.value) 
								? cates.find(cate => cate.id === item.value).name 
								: item.placeholder 
						}}
					</view>
					<u-select 
						@confirm="val=>changeSelect(item,val)" 
						:value="item.select" 
						:list="cates" 
						value-name="id" 
						label-name="name">
					</u-select>
				  </view>
				  <view class="drawer-body-item-upload" v-if="item.type === 'upload'">
					  <u-upload
					   v-model="item.value" 
					   
					   :max-count="1" 
					   :action="uploadUrl" 
					   :file-list="item.value ? [{url: item.value}] : []" 
					   @on-success="(res) => handleUploadSuccess(res, item)"
					   @on-error="(err) => handleUploadError(err, item)"
					   ></u-upload>
				  </view>
				  <view class="drawer-body-item-error" v-if="item.error && item.error.message">
					  {{item.error.message}}
				  </view>
			  </view>
		  </scroll-view>
		  <view class="drawer-footer">
			  <button class="drawer-footer-button" @click="saveDrawer">保存</button>
		  </view>
		  
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	  data() {
		  return {
			  url: 'https://admin.cqycgyl.com',
			  image: '',
			  uploadUrl: 'https://admin.cqycgyl.com/api/common/upload',
			  activeIndex: 0,
			  shopInfo: {},
			  bgHeight: 200,
			  dragStartY: 0,
			  dragOffsetY: 0,
			  cates:[{
				id: 1,
				name: '全部'
			  }],
			  drawerParam:{},
			  submitGoods: [],
		  }
	 },
	  
	  onLoad(options){
		  this.id = options.id;
		  this.$u.api.describ.getAddDrawer().then(res=>{
			if(res.code == 1){
				this.drawerParam = res.data;
			}
		  })
		  .catch(err=>{
			console.log(err)
		  })

		  console.log(this.id);
		  this.$u.api.shop.getStoreInfo(options.id).then(res =>{ 
			if(res.code == 200){
				this.shopInfo = res.data
				if(res.data.medal == 1){
					this.image = '/uploads/20250909/40396689930315003478919540864182.png'
				}else if(res.data.medal == 2){
					this.image = '/uploads/20250909/90774006005561052614876550762361.png'
				}else{
					this.image = '/uploads/20250909/12358751629150006812875101614554.png'
				}
				return res.data;
	
			}
		}).then(res=>{
			this.$u.api.merchant.getGoodsList({shop_id: res.id}).then(res=>{
				if(res.code == 1){
					this.cates = res.data
					this.cates.forEach(item=>{
						item.goods.forEach(goods=>{
							this.submitGoods.push(goods)
						})
					})
					console.log('submitGoods',this.submitGoods)
				}
			})
		})
	  },
	  onShow(){
  
	  },

	  
	  
	  methods: {
		editGoods(id){
			this.drawerParam.show = true;
			this.drawerParam.title = '编辑商品';
			let row = this.submitGoods.filter(item=>item.id == id)[0];
			for(let key in row){
				this.drawerParam.rows.forEach(item => {
					if(item.field == key){
						item.value = row[key];
					}
				})
			}
			this.drawerParam.rows.push({
				field: 'id',
				type: 'input',
				value: row.id,
				hidden: true,
				placeholder: '修改',
				regExp: [],
				error: null,
			})
			this.drawerParam.rows.push({
				field: 'update_flag',
				type: 'input',
				value: 1,
				hidden: true,
				placeholder: '修改',
				regExp: [],
				error: null,
			})
			
		},
		deleteGoods(id){
			console.log('deleteGoods')
			console.log(id)
			uni.showModal({
				title: '删除商品',
				content: '确定删除该商品吗？',
				success: (res) => {
					if(res.confirm){
						this.submitGoods = this.submitGoods.filter(item=>item.id !== id);
					}
				}
			})
			
		},
		saveGoods(){
			console.log('保存商品')
			console.log(this.submitGoods)
			this.$u.api.shop.saveGoods(
				{
					goodslist: this.submitGoods,
					categorys: this.cates,
				}
			).then(res =>{
				if(res.code == 200){
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		  },
		  showSelect(item){
			console.log('showSelect')
			console.log(item)
			item.select = true;
		  },
		  selectCate(id){				
			console.log('selectCate')
			console.log(id)
			let item = this.cates.filter(item=>item.id == id)[0];
			uni.showModal({
				title: '修改类目名称',
				content: item.name,
				editable: true,
				success: (res) => {
					if(res.confirm&&res.content && res.content.trim() !== ''){
						item.name = res.content;
						this.cates.find(cate => cate.id === id).name = res.content;
						this.activeCate = id;
					}
				}
			});
		  },
		  backNav(){
			  console.log('backNav');
		  // 判断uni-app页面栈是否有页面，没有则切换到首页
		  const pages = getCurrentPages();
		  if (pages.length <= 1) {
			  uni.switchTab({
				  url: '/pages/index/index'
			  });
		  } else {
			  uni.navigateBack();
		  }
		  },
  
		  Goto(){
				  let latitude =Number(this.shopInfo.latitude) 
				  let longitude =Number(this.shopInfo.longitude) 
				  let address = this.shopInfo.address
				  uni.getLocation({
					  type: 'gcj02', 
					  success: function(res) {
						  uni.openLocation({
							  latitude: latitude,
							  longitude: longitude,
							  address: address,
							  success: function(req) {
							  },
							  fail(was) {
							  }
						  });
					  },
					  fail: function(res) {
						  if (res.errMsg == "getLocation:fail auth deny") {
							  uni.showModal({
								  content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								  confirmText: "确认",
								  cancelText: '取消',
								  success: (res) => {
									  if (res.confirm) {
										  uni.openSetting({
											  success: (res) => {
											  }
										  })
									  } else {
										  return false;
									  }
								  }
							  })
						  }
					  }
				  });		
		  },
		  playphone(){
			  uni.makePhoneCall({
				  phoneNumber:this.shopInfo.mobile,
				  success(res) {
				  },
				  fail(req) {
				  }
			  })
		  },
		  handleNavItemClick(index) {
			  this.activeIndex = index;
		  },
		  previewImage(url) {
			if(Array.isArray(url)){
				uni.previewImage({
					urls: url
				})
			}else{
				uni.previewImage({
					urls: [url]
				})
			}
		  },
		  handleTouchStart(e) {
			  this.dragStartY = e.touches[0].clientY;
		  },
		  handleTouchMove(e) {
			this.dragOffsetY = e.touches[0].clientY;
			
		  },
		  handleTouchEnd(e) {
           

			// 递归缩小bgHeight直到小于等于100
			// direction: -1 表示向上收缩，1 表示向下展开
			// targetHeight: 希望动画结束后的高度
			const animateBgHeight = (direction, targetHeight) => {
				const step = 20;
				// 判断是否已经达到目标高度
				if ((direction === -1 && this.bgHeight <= targetHeight) || (direction === 1 && this.bgHeight >= targetHeight)) {
					this.bgHeight = targetHeight;
					return;
				}
				// 根据方向递增或递减
				this.bgHeight += step * direction;
				// 防止超过目标高度
				if ((direction === -1 && this.bgHeight < targetHeight) || (direction === 1 && this.bgHeight > targetHeight)) {
					this.bgHeight = targetHeight;
				}
				setTimeout(() => {
					animateBgHeight(direction, targetHeight);
				}, 16);
			}


			this.dragOffsetY = this.dragOffsetY - this.dragStartY;
			  if(this.dragOffsetY < -100){
				animateBgHeight(-1, 200);
				console.log(this.dragOffsetX,this.dragOffsetY);
			  }

			  if(this.dragOffsetY > 100){
				animateBgHeight(1, 564);
				console.log(this.dragOffsetX,this.dragOffsetY);
			  }

		  },
		  addCate(){
			// 生成一个随机5位数整数
			const randomFiveDigit = Math.floor(10000 + Math.random() * 90000);
			const id = Math.floor(Date.now()/1000)+''+randomFiveDigit;
			uni.showModal({
				title: '添加类目',
				content: '',
				editable: true,
				placeholder: '请输入类目名称',
				success: (res) => {

					if(res.confirm&&res.content && res.content.trim() !== ''){
						this.cates.unshift({
							id: id,
							name: res.content,
							shop_id: this.id,
							logo: '',
						});
					}
				}
			})
		  },

		  
		  deleteCate(id){
			// 先删除对应商品
			this.submitGoods = this.submitGoods.filter(goods => goods.category_id !== id);
			this.cates = this.cates.filter(item => item.id !== id);
		  },
		  addGoods(){	
			console.log('添加商品')
			if(this.cates.length === 0){
				uni.showToast({
					title: '请先添加左侧类目',
					icon: 'none'
				})
				return;
			}
			this.drawerParam.rows = this.drawerParam.rows.filter(item => item.field !== 'id');
			this.drawerParam.show = true;
			this.drawerParam.title = '添加商品';
		  },
		  saveDrawer(){
			console.log('保存商品')
			console.log(this.drawerParam.rows)

			let data = {}
			let error = false;
			this.drawerParam.rows.forEach(item => {
				if(item.regExp && item.regExp.length > 0){
					item.regExp.forEach(regExp => {
						regExp.regExp = new RegExp(regExp.regExp);
						if(!regExp.regExp.test(item.value)){
							item.error ={
								message: regExp.message
							}
							uni.showToast({
								title: regExp.message,
								icon: 'none'
							})
							error = true;
							return;
						}
					})
					if(error){
						return;
					}
				}
				data[item.field] = item.value
			})
			if(error){
				return;
			}
			data['shop_id'] = this.id;
			if(data.id){
				this.submitGoods = this.submitGoods.map(item => item.id === data.id ? data : item);				
			}else{
				this.submitGoods = [...this.submitGoods, data];
			}
			console.log(this.submitGoods)
			this.drawerParam.rows = this.drawerParam.rows.filter(item => item.field !== 'id');
			this.drawerParam.rows = this.drawerParam.rows.filter(item => item.field !== 'update_flag');
			this.drawerParam.show = false;
		  },
		  changeSelect(item,val){
			  console.log('选择类目')
			  this.$forceUpdate()
			 
			 
			  // 确保rows里对应行的value也同步更新
			  const row = this.drawerParam.rows.find(r => r.field === item.field);
			  if (row) {
				  row.value = val[0].value;
				  row.select = false;
			  }
			  console.log(item)
			  console.log(val[0].value)
			  console.log(this.drawerParam.rows)

		  },
		  handleUploadSuccess(res, item){
			
			console.log(item)
			item.value =   res.data.fullurl;
			this.drawerParam.rows.find(r => r.field === item.field).value = res.data.fullurl;
		  }	
	  }
  }
  </script>
  
  <style scoped lang="scss">
  .nav-top{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 106rpx;
	  background-color: #ffffff;
	  
  }
  
  .out-main{
	  width: 750rpx;
	  height: 100vh;
	  background-color: #ffffff;
	  display: flex;
	  flex-direction: column;
	  .navTop{
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  padding: 30rpx;
		  padding-top: 106rpx;
		  background: rgba(3,3,3,0);
		  color: white;
		  opacity: 0.3;
		  position: fixed;
		  width: 100%;
	  }
	  .left{
		  width: 40rpx;
		  height: 40rpx;
		  background: #F1F1F1;
		  border-radius: 40rpx;
	  }
	  
	  .topBg{
		width: 750rpx;
		height: 564rpx;
		object-fit: cover;
		object-fit: aspectFill;
		image{
			width: 100%;
			height: 100%;
		}
	  }
	  .main-content{
		  position: relative;
		  width: 690rpx;
		  height: 100vh;
		  border-radius: 24rpx;
		  box-shadow: 0 2rpx 12rpx 2rpx #015aff0f;
		  box-sizing: border-box;
		  padding: 30rpx 30rpx 20rpx 30rpx;
		  height: 374rpx;
		  background-color: #FFFFFF;
		  align-self: center;
		  margin-top: -148rpx;
  
	  }
  
	  scroll-view:not(.cate-row2){
		  flex: 1;
		  min-height: 0;
		  max-height: 100vh;
		  overflow: hidden;
	  }
	  .logo{
		  background: rgb(228, 231, 219);
		  width: 120rpx;
		  height: 120rpx;
		  border-radius: 20rpx;
		  position: absolute;
		  top : 30rpx;
		  right: 30rpx;
	  }
  
	  .title-bar{
		  display: flex;
		  align-items: center;
		  .title{
			  font-size: 36rpx;
			  font-weight: bold;
			  color: #202020;	
			  display: flex;
			  align-items: center;
			  
		  }
		  .tag{
			  width: 44rpx;
			  height: 44rpx;
			  background: gold;
			  margin-left: 8rpx;
  
		  }
	  }
  
	  .info-bar{
		  position: relative;
		  display: flex;
		  flex-direction: column;
		  .row1{
			  display: flex;
			  align-items: center;
			  width: 348rpx;
			  justify-content: space-between;
			  margin-top: 20rpx;
			  position: relative;
  
			  .tit{
				  font-size: 24rpx;
				  color: #999999;
			  
			  }
			  .num{
				  font-size: 28rpx;
				  color: #333333;
				  margin-top: 4rpx;
			  }
			  .stat{
				  font-size: 28rpx;
				  font-weight: bold;
				  color: #1DC57C;
				  margin-top: 4rpx;
			  }
			  .tit,.num,.stat{
					  /* 文本不换行 */
					  white-space: nowrap;
			  }
  
			  .col1,.col2,.col3{
				  text-align: center;
				  position: relative;
			  }
			  .col2:before,.col3:before{
				  content: '';
				  position: absolute;
				  width: 1rpx;
				  height: 42rpx;
				  left: -40rpx;
				  top: 20rpx;
  
				  background: #EFEFEF;
			  }
			  
		  }
		  .row2{
			  display: flex;
			  align-items: center;
			  width: 100%;
			  margin-top: 20rpx;
			  .label1,.label2{
				  display: flex;
				  border-radius: 4rpx;
				  border: solid 1rpx #F44848;
				  padding: 1rpx 12rpx 1rpx 8rpx;
				  align-items: center;
  
				  .quan{
					  color: white;
					  background: #F44848;
					  width: 24rpx;
					  height: 24rpx;
					  font-size: 18rpx;
					  display: flex;
					  justify-content: center;
					  align-items: center;
  
				  }
				  .miaoshu{
					  font-size: 22rpx;
					  color: #FF4848;
					  margin-left: 4rpx;
					  text-align: center;
					  
				  }
			  }
			  .label2{
				  margin-left: 12rpx;

			  }
		  }
		  
	  }
	  .info-bar:before{
		  content: "";
		  position: absolute;
		  top: 166rpx;
		  width: 100%;
		  height: 1rpx;
		  background: #EFEFEF;
	  }
  
	  .row3{
		  margin-top: 40rpx;
		  font-size: 24rpx;
		  color: #333333;
		  display: flex;
		  .dizhi{
			  max-width: 424rpx;
			  max-height: 84rpx;
			  line-height: 1.8;
			  max-height: 84rpx;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  display: -webkit-box;
			  -webkit-line-clamp: 2;
			  -webkit-box-orient: vertical;
		  }
		  .icon-group{
			  flex: 1;
			  display: flex;
			  justify-content: flex-end;
			  align-items: center;
			  .daohang,.dianhua{
				  display: flex;
				  margin-left: 20rpx;
				  flex-direction: column;
				  align-items: center;
				  color: #999999;
				  uni-icons{
					  width: 48rpx; 
					  height: 48rpx; 
					  background:#F1F1F1; 
					  border-radius: 48rpx; 
					  display: flex; 
					  justify-content: center; 
					  align-items: center;
				  }
				  
				  span{
					  margin-top: 4rpx;
				  }
  
			  }
		  }
	  }
  
	  .navigator{
		  display: flex;
		  align-items: center;
		  margin-top: 40rpx;
		  font-size: 32rpx;
		  padding-left: 30rpx;
		  box-sizing: border-box;
		  width: 100%;
		  .nav-item:not(:first-child){
			  margin-left: 60rpx;
		  }
		  .nav-item.active{
			  color: #333333;
			  font-weight: bold;
			  position: relative;
			  
		  }
		  .nav-item.active::after{
			  content: '';
			  position: absolute;
			  right: 6rpx;
			  bottom: -6rpx;
			  width: 50rpx;
			  height: 6rpx;
			  border-radius: 6rpx;
			  background: #1DC57C;
		  }
		  
	  }
	  .merchant-info{
		  width: 690rpx;
		  align-self: center;
		  box-sizing: border-box;
		  overflow: hidden;
		  flex-shrink: 0;
		  margin: 24rpx auto;
		  box-shadow: 0 2rpx 12rpx 2rpx #0000000f;
		  border-radius: 24rpx;
		  
		  .shop-env{
			  padding: 30rpx;
			  border-radius: 24rpx;
			  background-color: white;
			  .title{
				  display: flex;
				  align-items: center;
				  font-size: 28rpx;
				  font-weight: bold;
				  color: #333333;
				  
				  span{
					  margin-left: 16rpx;
				  }
				  .more{
					  margin-left: auto;
					  color: #999999;
					  font-size: 22rpx;
					  display: flex;
					  align-items: center;
					  font-weight: normal;
				  }
			  }
			  .pic-group{
				  margin-top: 24rpx;
				  display: flex;
				  flex-wrap: wrap;
				  width: 100%;
				  justify-content: space-between;
  
				  .pic-item{
					  width: 196.6rpx;
					  border-radius: 20rpx;
					  height: 147.84rpx;
					  overflow: hidden;
					  .pic{
						  width: 100%;
						  height: 100%;
					  }
				  }
				  .pic-item:not(:first-child){
					  margin-left: 22rpx;
				  }
			  }
		  }
	  }
	  .left-cate{
		width: 750rpx;
		padding: 26rpx;
		.cate-row1{
			display: flex;
			align-items: center;
			.cate-title{
				font-weight: bold;
				font-size: 32rpx;
				color: #202020;
			}
			.right-icon{
				margin-left: auto;
			}
			.sub-tip{
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				margin-left: 12rpx;
			}
		}
		
		.cate-row2{
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			.row2-box{
				display: flex;
				flex-direction: row;
				height: 76rpx;
				width: 100%;
				.cate-time{
					font-size: 28rpx;
					width: 150rpx;
					background: #F9F9F9;
					border-radius: 4px 4px 4px 4px;
					font-weight: 400;
					padding: 20rpx 30rpx 16rpx 36rpx;
					color: #333333;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					flex-shrink: 0;
				}
				.cate-time:not(:first-child){
					margin-left: 30rpx;
				}

				.cate-time::after{
					content: '×';
					font-size: 28rpx;
					color: #999999;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
			
		}

	  }
	  

	  
	  .order-dish{
		  display: flex;
		  margin-top: 24rpx;
		  flex: 1;
		  overflow: hidden;
		  height: 100%;
		  .aside{
  
			  width: 160rpx;
			  background-color: #F6F8F7;
			  flex: 0 0 160rpx;
			  height: 100%;
			  
  
			  .sidebar{
				  
				  width: 160rpx;
				  height: 96rpx;
				  font-size: 24rpx;
				  color: #333333;
				  padding: 12rpx 24rpx;
				  box-sizing: border-box;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  
				  
			  }
			  .sidebar.active{
				  background-color: #FFFFFF;
				  color: #F16325;
			  }
			  .add-cate{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				color: #F16325;
				font-size: 26rpx;
				font-weight: bold;
			  }
		  }
  
		  .receip{
			  flex: 1;
			  overflow: hidden;
			  height: 100%;
			  .goods-bar{
				  display: flex;
				  margin-left: 30rpx;
				  padding-right: 30rpx;
				  .goods-logo{
					  width: 192rpx;
					  height: 192rpx;
					  border-radius: 24rpx;
					  overflow: hidden;
					  image{
						  width: 100%;
						  height: 100%;
					  }
					  
				  }
				  .goods-info{
					  flex: 1;
					  margin-left: 22rpx;
					  .goods-name{
						  width: 100%;
						  font-size: 28rpx;
						  color: #333333;
						  font-weight: bold;
						  overflow: hidden;
						  text-overflow: ellipsis;
						  display: -webkit-box;
						  -webkit-line-clamp: 2;
						  -webkit-box-orient: vertical;

					  }
					  .goods-rank{
						  font-size: 24rpx;
						  color: #1DC57C;
						  margin-top: 4rpx;
						  font-weight: bold;
					  }

					  .goods-info-row2{
						display: flex;
						flex-direction: row;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					  }


					  .sales{
						  font-size: 24rpx;
						  color: #999999;
						  margin-top: 4rpx;
						  margin-left: 12rpx;
					  }
					  .select{
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  margin-top: 26rpx;
						  .goods-price{
							  display: flex;
							  align-items: center;
							  .yuan{
								  font-size: 24rpx;
								  color: #F24040;
							  }
							  .price{
								  font-size: 36rpx;
								  color: #F24040;
								  font-weight: bold;
							  }
						  }
						  .operate{
							  display: flex;
							  align-items: center;
							  font-size: 22rpx;
							  color: #999999;
							  .text:nth-child(2){
								margin-left: 32rpx;
							  }
						  }
					  }
				  }
			  }
			  .goods-bar:not(:first-child){
				  margin-top: 58rpx;
			  }
			  .add-goods{
				display: flex;
				width: 520rpx;
				height: 100rpx;
				align-items: center;
				justify-content: center;
				margin: 0rpx auto;
				border-radius: 24rpx  24rpx  24rpx  24rpx;
				border: 1rpx dashed #F16325;
				color: #F16325;
				
			  }
		  }
	  }

	  .footer{
		  width: 750rpx;
		  margin-left: auto;
		  display: flex;
		  height: 166rpx;
		  flex-shrink: 0;
		  box-sizing: border-box;
		  padding: 10rpx 30rpx;
		  
		  .foot-icon{
			  
		  }
		  .total-bar{
			  display: flex;
			  margin-left: 28rpx;
			  .rmb{
				  font-size: 24rpx;
				  margin-top: 10rpx;
			  }
			  .total-price{
				  font-size: 36rpx;
			  }
		  }
		  .submit{
			  margin: 0;
			  margin-left: auto;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  width: 216rpx;
			  height: 76rpx;
			  background: #F16325;
			  color: #ffffff;
			  font-size: 32rpx;
			  border-radius: 38rpx;
		  }
	  }
	  .drawer-content{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 38rpx;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		.drawer-header{
			display: flex;
			align-items: center;
			width: 100%;
			height: 76rpx;
			flex-shrink: 0;
			font-weight: bold;
			font-size: 36rpx;
			color: #202020;									
			margin-bottom: 24rpx;
			justify-content: center;
			.drawer-header-close{
				position: absolute;
				right: 30rpx;
				top: 10rpx;
				width: 76rpx;
				height: 76rpx;
				
			}
		}
		.drawer-body{
			width: 100%;
			overflow-y: auto;
			
			flex: 1;
			.drawer-body-item{
				align-items: center;
				margin-bottom: 24rpx;
				width: 100%;
				border-bottom: 1rpx solid #E5E5E5;
				.drawer-body-item-title{
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
				.drawer-body-item-input{
					margin-top: 10rpx;
					width: 100%;

					input{
						width: 100%;
						height: 76rpx;
						color: #333333;
						border-radius: 38rpx;
					}
				}
				.drawer-body-item-select{

					u-select{
						width: 100%;
						height: 76rpx;
						color: #333333;
						border-radius: 38rpx;
					}
				}
				.drawer-body-item-upload{
					u-upload{
						width: 100%;
						height: 76rpx;
						color: #333333;
						border-radius: 38rpx;
					}
				}
				.drawer-body-item-error{
					font-size: 28rpx;
					color: #FF0000;
					margin-top: 10rpx;
				}
			}
		}
		.drawer-footer{
			width: 100%;
			height: 166rpx;
			flex-shrink: 0;
			.drawer-footer-button{
				font-size: 28rpx;
				width: 100%;
				height: 90rpx;
				width: 100%;
				background: #F16325;
				color: #ffffff;
				border-radius: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	  }
  
  }
  
  </style>